<template>
  <div class="foot">
    <div class="logo">
      <div>
        <img src="../assets/微博.png" alt="" />
        <img src="../assets/微信.png" alt="" />
        <img src="../assets/抖音.png" alt="" />
        <img src="../assets/ff.png" alt="" />
        <img src="../assets/油管.png" alt="" />
      </div>
      <img src="../assets/底部logo.png" alt="" style="position: absolute; right: 350px;"/>
    </div>
    <div class="list">
      <!-- 第一次循环，遍历到第一层子数组 -->
      <div class="list-items" v-for="item in lists" :key="item.id">
        <h4 style="font-weight: 600; color: #3D3D3D;">{{ item.name }}</h4>

        <!-- 第二次循环，遍历到第一层子数组的text子数组 -->
        <div v-for="item2 in item.text" :key="item2.id">
          <h4 style="font-weight: 400;">
            <a href="" style="color: #3d3d3d; text-decoration: none;">{{ item2.name }}</a>
          </h4>

          <!-- 第三次循环，遍历到第二层子数组的text子数组 -->
          <div v-for="item3 in item2.text" :key="item3.id">
            <h5 style="font-weight: 100;">
              <a href="" style="color: #7a7979; text-decoration: none;">{{ item3.name }}</a>
            </h5>
          </div>
          
        </div>
      </div>
    </div>
    <div class="warn">
      <p>
        Copyright © 2023 www.Harsine.com.All Rights Reserved. 依蓝公司 版权所有
      </p>
      <p style="display: flex; justify-content: center; align-items: center;">
        <img src="../assets/公安部logo.png" alt="" />
        公安部联网备案号：37021302000338&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鲁ICP备10012159号-7
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //这是一个多维数组
      lists: [
        {
          id: 0,
          name: "产品",
          text: [
            {
              id: 0,
              name: "HarSine通用版",
            },
            {
              id: 1,
              name: "HarSine定制版",
            },
            {
              id: 2,
              name: "HarSine独立版",
            },
            {
              id: 3,
              name: "HarSine接口版",
            },
          ],
        },
        {
          id: 1,
          name: "关于",
          text: [
            {
              id: 0,
              name: "服务协议",
            },
            {
              id: 1,
              name: "隐私政策",
            },
          ],
        },
        {
          id: 2,
          name: "购买",
          text: [
            {
              id: 0,
              name: "场景应用",
              text: [
                {
                  id: 0,
                  name: "定制版",
                },
                {
                  id: 1,
                  name: "独立版",
                },
                {
                  id: 2,
                  name: "接口版",
                },
              ],
            },
            {
              id: 1,
              name: "订阅及部署服务",
              text: [
                {
                  id: 0,
                  name: "订阅定制版",
                },
                {
                  id: 1,
                  name: "订阅独立版",
                },
                {
                  id: 2,
                  name: "订阅接口版",
                },
              ],
            },
          ],
        },
        {
          id: 3,
          name: "公司",
          text: [
            {
              id: 0,
              name: "关于红信",
            },
            {
              id: 1,
              name: "线下体验",
            },
            {
              id: 2,
              name: "联系我们",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.foot {
  margin-top: 20px;
  width: 100%;
  background-color: #f7f8f9;
  color: black;
}
.foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  width: 100%;
  height: 60px;
}
.logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.logo div {
  position: absolute;
  left: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo div img {
  margin-right: 70px;
}

.list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.list-items {
  margin: 10px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}
.list div:first-child {
  margin-left: 350px;
}

.warn {
  width: 100%;
  color: #CFCFCF;
  font-size: 12px;
}
</style>